<template>
  <div id="mainBox" >
      <el-select v-model="selectedBatchId" placeholder="请选择批次">
        <el-option
          v-for="item in batchOption"
          :key="item.batchId"
          :label="item.batchName"
          :value="item.batchId">
        </el-option>
      </el-select>
      <el-input v-model="projectNameSearch" placeholder="请输入项目名称" style="width: 217px;"></el-input>

      <el-button type="primary">搜索</el-button>

      <el-table
          :header-cell-style="{background:'#eef1f6',color:'#606266','text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :data="showTable"
          stripe
          style="width: 100%;margin-top: 30px;"
          height=100%
          >
          <el-table-column
            prop="proName"
            label="项目名称"
          >
          </el-table-column>
          <el-table-column
            prop="memberName"
            label="主持人">
          </el-table-column>
          <el-table-column
            prop="proDepartment"
            label="项目所属部门">
          </el-table-column>
          <el-table-column
            label="项目状态">
            <template slot-scope="scope">
              {{GlobalMapProApproval(scope.row.proApproval)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="memberDep"
            label="主持人所属部门">
          </el-table-column>
          <el-table-column
            prop="levelName"
            label="项目级别">
          </el-table-column>
          <el-table-column
            label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="checkPdf(scope.row)">查看</el-button>
              </template>
          </el-table-column>
        </el-table>
        <div class="resource-page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5,10, 15]"
            :page-size="pagesize"
            :pager-count="7"
            layout=" prev, pager, next,sizes, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </div>
  </div>

</template>

<script>
  export default{
      data(){
        return{
            pagesize: 5,
            currentPage: 1,
            batchOption:[{batchName:'全部批次',batchId:'0'}],
            selectedBatchId:'',
            depOption:[{depId:'0',depName:'全部学院'}],
            selectedDepId:'',
            projectNameSearch:'',
            resData:[],
            secResData:[],
            tableData: [],
            filterDataShow:[]
        }
      },
      watch:{
        selectedBatchId(){
          this.showTableByBatchId()
        },
        projectNameSearch(){
          this.searchResource()
        }
      },
      created() {
        this.getBatchName()
        this.getAllProject()
        this.searchResource()
      },
      methods:{
        checkPdf(row){
          this.$router.push({path:'/LookOver',query:{pro_id:row.proId}})
        },
        searchResource() {
          this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜
          let filterKeywords = this.projectNameSearch.trim();
          let filerReasource = this.resData.filter((item) => {
            //过滤全部数据
            if (item.proName.includes(filterKeywords)) {
              return item;
            }
          });
          this.tableData = filerReasource; //将符合条件的内容赋给filterDataShow
        },
        showTableByBatchId(){
          if(this.selectedBatchId==0){
            this.tableData=this.resData
          }else{
            this.tableData=this.resData.filter(item =>item.batchId == this.selectedBatchId)
          }
            this.secResData=this.tableData
            this.selectedDepId="0"
        },
        //获得所有非暂存项目
        getAllProject(){
          this.$api.project.getNotTemporaryProject({}).then((res)=>{
            console.log(res)
            this.tableData=res.data.data
            this.resData=res.data.data
            this.secResData=res.data.data
          })
        },
        //填充批次选择框
        getBatchName(){
          this.$api.batch.getBatchName().then((res)=>{
            res.data.data.forEach(item =>{
              this.batchOption.push(JSON.parse(JSON.stringify(item)))
            })
            console.log(res)
          })
        },
        handleSizeChange(psize) {
          this.pagesize = psize;
        },
        handleCurrentChange(currentPage) {
          this.currentPage = currentPage;
        },
        //填充学院下拉菜单
      },
      computed: {
        //showTable计算属性通过slice方法计算表格当前应显示的数据
        showTable() {
          return this.tableData.slice(
            (this.currentPage - 1) * this.pagesize,
            this.currentPage * this.pagesize
          );
        },
      },
  }
</script>

<style scoped>
  #mainBox{
    margin: 30px 30px 0 30px;
    height: 90%;
  }
</style>
